<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
  <div id="box">
    <child @payevent="handleChildPayevent($event)"></child>
  </div>

  <script type="text/javascript">

    Vue.component(
      "child",
      {
        template:`
        <div>
          <button @click="payToDaddy()">交赡养费</button>
        </div>
        `,
        data(){
          return {
            name:"奉先"
          }
        },
        methods:{
          payToDaddy(){
            this.$emit("payevent",this.name)
          }
        }
      }
    )

    new Vue({
      el: "#box",
      methods:{
        handleChildPayevent(event){
          console.log(`收到来自${event}的赡养费，吾儿真乖！`);
        }
      }
    })


  </script>

</body>

</html>